<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #userTable .table{
            border: 1px solid #ccc;
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }
        .head,.body,.footer,th,td{
            border: 1px solid #ccc; 
            border-collapse: collapse;
        }
        .gbtn_curd{
            float: left;
        }
        .gbtn_page{
            float: right;
        }
        .query{
            text-align: center;
            margin-top: 20xp;

        }
        tbody tr:hover{
            background-color: aliceblue;
        }
        .inserUserTable>tbody>tr>td,.inserUserTable tfoot tr td{
            border:0;
        }
        #insertUser{
            text-align: center;
            margin-top: 50px;
        }
        .inserUserTable{
            margin: 0 auto;
        }
    </style>
    <script>
        //将更新的数据放入表格中 的函数体
        function updateToUserTable(){
            let newDatas=[];
            newDatas[0] = document.getElementById("insertData1").value;
            newDatas[1] = document.getElementById("insertData2").value;
            newDatas[2] = document.getElementById("insertData3").checked ? "男" : "女";
            newDatas[3] = document.getElementById("insertData4").value;
            newDatas[4] = document.getElementById("theIndex").value;
            let updateTo = document.getElementsByName("trcheck");
            let To = [...updateTo].filter(item=>item.value==newDatas[4]);
            let ToTr = To[0].parentNode.parentNode;
            
            let count =1;
            for(let i =1,len =newDatas.length;i<len;i++ ){
                console.log(i);
                console.log( ToTr.cells[i]);
                ToTr.cells[i].innerHTML=newDatas[i-1];
            }
            // newDatas.forEach((item)=>{
            //     // ToTr.cells[count].innerHTML=item;
            //     console.log(item);
            //     console.log( ToTr.cells[count]);
            //     count++;
            // })
            let inserTable_hidden = document.getElementById("insertUser").hidden = true;
            let userTable_hidden = document.getElementById("userTable").hidden = false;
            let btn_updataUser_do =document.getElementById("updataUser_do").hidden=true;
            let btn_insertUser_do= document.getElementById("insertUser_do").hidden=true;
        }
        //更新选中的一行的数据的函数体
        function updateUser() {
            let count = 0;
            let choose = document.getElementsByName("trcheck");
            let checks = [...choose].filter(item => item.checked == true);
            if (checks.length > 1) {
                alert("只能选择一行进行修改！");
            } else if (checks.length == 1) {
                document.getElementById("insertUser").hidden = false;
                document.getElementById("userTable").hidden = true;
                let btn_updataUser_do =document.getElementById("updataUser_do").hidden=false;
                console.log(checks[0]);
                let values = [];
                values[0] = checks[0].parentNode.nextElementSibling.innerHTML;
                values[1] = checks[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;
                values[2] = checks[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
                values[3] = checks[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
                values[4] = checks[0].value;
                console.log(values[4]);
                document.getElementById("insertData1").value = values[0];
                document.getElementById("insertData2").value = values[1];
                if (values[2]=="女") {
                
                    document.getElementById("insertData3").checked = false;
                    document.getElementById("insertData3_2").checked = true;

                }
                document.getElementById("insertData3").value = values[2];
                document.getElementById("insertData4").value = values[3];
                document.getElementById("theIndex").value=values[4];
            }

        }

        function InsertUser() {
            //收集数据 
            let dataParams = [];
            dataParams[0] = document.getElementById("insertData1").value;
            dataParams[1] = document.getElementById("insertData2").value;
            dataParams[2] = document.getElementById("insertData3").checked ? "男" : "女";
            dataParams[3] = document.getElementById("insertData4").value;
            let inserTable_hidden = document.getElementById("insertUser").hidden = true;
            let userTable_hidden = document.getElementById("userTable").hidden = false;
            //添加到表格
            let tbody = document.getElementById("body");
            let row = tbody.insertRow(tbody.rows.length);
            row.setAttribute("date-row-id", tbody.rows.length);
            let cell0 = row.insertCell(0);
            let input = document.createElement("input");
            input.type = "checkbox";
            input.value = tbody.rows.length;
            cell0.appendChild(input);
            let count = 1;
            dataParams.forEach((item) => {
                let cell = row.insertCell(count);
                cell.innerHTML = item;
                count++;
            })
        }
        function deleteUser() {
            //选中
            let arrays = document.getElementsByName("trcheck");
            let params = "";
            let checks = [...arrays].filter(item => item.checked == true);
            checks.forEach((item) => {
                if (params == "") {
                    params += item.value;
                } else {
                    params += ",";
                    params += item.value;
                }
            });
            //删除
            if (checks.length > 0) {
                let newArrays = params.split(",");  //将字符串以逗号分隔位数组

                newArrays.forEach((item) => {
                    let currentIndex = document.querySelector(`[date-row-id='${item}']`).rowIndex;
                    document.getElementById("body").deleteRow(currentIndex - 1);
                })
            }
        }
        function init() {
            // 将修改的数据填入到表格
            document.getElementById("updataUser_do").addEventListener("click",updateToUserTable,false);
            //修改选中的数据
            document.getElementById("userTable_btnUpdate").addEventListener("click", updateUser, false);

            //添加新的元素
            document.getElementById("insertUser_do").addEventListener("click", InsertUser, false);
            //删除元素
            document.getElementById("userTable_btnDel").addEventListener("click", deleteUser, false);

            // 点击表格 选中改行
            document.querySelector(".body").addEventListener("click", (event) => {
                if (event.target.tagName != "INPUT") {
                    let point = event.target.parentNode.firstElementChild.firstElementChild;
                    if (point.checked == true) {
                        point.checked = false;
                    } else {
                        point.checked = true;
                    }
                }
            }, false)
            //单选框全选
            document.getElementById("checkAll").addEventListener("change", () => {
                let checked = document.getElementById("checkAll").checked;
                let checks = document.getElementsByName("trcheck");
                checks.forEach((item) => {
                    item.checked = checked;
                })
            }, false);
            //点击新增按钮   新增界面与显示界面的交互显示
            document.getElementById("insertUser_btnReturn").addEventListener("click", () => {
                document.getElementById("insertUser").hidden = true;
                document.getElementById("userTable").hidden = false;
                let btn_updataUser_do =document.getElementById("updataUser_do").hidden=true;
                let btn_insertUser_do= document.getElementById("insertUser_do").hidden=true;

            }, false);

            document.getElementById("userTable_btnAdd").addEventListener("click", () => {
                document.getElementById("insertData1").value="";
                document.getElementById("insertData2").value="";
                document.getElementById("insertData3").checked=true;
                document.getElementById("insertData4").value="";
                let inserTable_hidden = document.getElementById("insertUser").hidden = false;
                let userTable_hidden = document.getElementById("userTable").hidden = true;
                let btn_insertUser_do= document.getElementById("insertUser_do").hidden=false;
            }, false)

            //双击表格 修改格子中的值
            document.getElementById("mybody").addEventListener("dblclick", (event) => {

                let clickPoint = event.target;
                let parentNode = clickPoint.parentNode;
                let input = document.createElement("input");
                input.type = "text";
                input.value = clickPoint.innerHTML;
                input.addEventListener("blur", (event) => {
                    let nowValue = event.target.value;
                    console.log(nowValue);
                    clickPoint.innerHTML = nowValue;
                }, false)
                clickPoint.innerHTML = "";
                clickPoint.appendChild(input);
                input.focus();

            }, false);
        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body id="mybody">

    <section id="insertUser" hidden>

        <table class="inserUserTable">
            <tbody>
                <tr>
                    <td>名称：</td>
                    <td><input type="text" id="insertData1"></td>
                </tr>
                <tr>
                    <td>编号：</td>
                    <td><input type="text" id="insertData2"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" checked id="insertData3" value="1">男
                        <input type="radio" name="sex" value="2" id="insertData3_2">女
                    </td>
                </tr>
                <tr>
                    <td>数量：</td>
                    <td><input type="text" id="insertData4"><input type="text" id="theIndex" hidden></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        <input type="button" id="insertUser_btnReturn" value="返回">
                        <input type="button" id="insertUser_do" value="确定" hidden>
                        <input type="button" id="updataUser_do" value="确定" hidden>
                    </td>
                </tr>
            </tfoot>
        </table>
    </section>


    <section id="userTable">
        <div class="query">
            <input type="text">
            <input type="button" value="查询">
        </div>
        <hr>
        <table class="table">
            <thead class="head">
                <tr>
                    <th><input type="checkbox" id="checkAll"></th>
                    <th>名称</th>
                    <th>编号</th>
                    <th>性别</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody class="body" id="body">
                <tr date-row-id="1">
                    <td><input type="checkbox" name="trcheck" value="1"></td>
                    <td>1</td>
                    <td>2</td>
                    <td>男</td>
                    <td>4</td>
                </tr>
                <tr date-row-id="2">
                    <td><input type="checkbox" name="trcheck" value="2"></td>
                    <td>2</td>
                    <td>2</td>
                    <td>男</td>
                    <td>4</td>
                </tr>
                <tr date-row-id="3">
                    <td><input type="checkbox" name="trcheck" value="3"></td>
                    <td>3</td>
                    <td>2</td>
                    <td>女</td>
                    <td>4</td>
                </tr>
                <tr date-row-id="4">
                    <td><input type="checkbox" name="trcheck" value="4"></td>
                    <td>4</td>
                    <td>2</td>
                    <td>女</td>
                    <td>4</td>
                </tr>
                <tr date-row-id="5">
                    <td><input type="checkbox" name="trcheck" value="5"></td>
                    <td>5</td>
                    <td>2</td>
                    <td>男</td>
                    <td>4</td>
                </tr>
                <tr date-row-id="6">
                    <td><input type="checkbox" name="trcheck" value="6"></td>
                    <td>6</td>
                    <td>2</td>
                    <td>女</td>
                    <td>4</td>
                </tr>
            <tfoot class="footer">
                <tr>
                    <td colspan="5">
                        <nav class="gbtn_curd">
                            <input type="button" id="userTable_btnAdd" value="新增">
                            <input type="button" id="userTable_btnUpdate" value="修改">
                            <input type="button" id="userTable_btnDel" value="删除">
                        </nav>
                        <nav class="gbtn_page">
                            首页&nbsp;上一页&nbsp;
                            <select></select>&nbsp;
                            下一页&nbsp;尾页
                        </nav>
                    </td>
                </tr>

            </tfoot>
            </tbody>
        </table>
    </section>
</body>

</html>